<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="validausuario.jsp"%>
<%@ page import="mobility.*" %>
<%@ page import="java.sql.*" %>

<%
	db conexion = new db();
	Gps gps = new Gps(conexion);
	
	String nic = (String)request.getParameter("nic");
	String Longitud = "0";
	String Latitud = "0";
	
	if (gps.CoordenasCliente(nic)) {
		
		Longitud = gps.getLongitud().replace(',', '.');
		Latitud = gps.getLatitud().replace(',', '.');
	}
	
	
%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="js/jquery-1.3.2.js"></script>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>
<script type="text/javascript">
	var map;
  function initialize(lat,lon) {
    var latlng = new google.maps.LatLng(6.708254,-72.861328);
    var myOptions = {
      zoom: 5,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    if (lat != "0" && lon != 0){
	    var coordenadas = new google.maps.LatLng(lat,lon);
	    //Establecemos las coordenadas del punto
	    var marker = new google.maps.Marker({ //opciones
	        position: coordenadas,
	        //Decimos que la posición es la de la variable 'coordenadas'
	        map: map,
	        //Nombre del mapa
	        icon:"images/home.png"
	        //Titulo (visible cuando colocamos el ratón sobre el punto)
	    });
	    map.setCenter(coordenadas);
		map.setZoom(13);
    }
  }
	function ShowPerson() {
		geocoder = new google.maps.Geocoder();
		var markers = [];
	    var info = [];
	    var infowindow = new google.maps.InfoWindow({
	        content: ''
	    });
		var url = "XmlUbicacionRecurso";
		var i=1;
		$.get(url, function (xml) {
		    $(xml).find("coordenada").each(function () {
		    	var latitud = $(this).find("latitud").text();
		       	var longitud = $(this).find("longitud").text();
		       	var nombre = $(this).find("nombre").text();
		       	var fecha = $(this).find("fecha").text();
		       	var direccion = "";
		       	var icono = "images/car.png"; 
		       	latitud = latitud.replace(',','.');
		       	longitud = longitud.replace(',','.');
		       	posicion = new google.maps.LatLng(parseFloat(latitud),parseFloat(longitud));
		       	var marker = new google.maps.Marker({ //opciones
		            position: posicion ,
		            map:map,
		            icon: icono
		       	});

		       	geocoder.geocode({'latLng': posicion}, function(results, status) {
		            if (status == google.maps.GeocoderStatus.OK) {
		              if (results[1]) {
		                direccion = results[1].formatted_address;
		              }
		            } else {
		              direccion = "Geocoder failed due to: " + status;
		            }
		          });
		       	var contenido ="Tecnico: <STRONG>" + nombre + "</STRONG><br/>Ultimo reporte: " + fecha + "<br/>Direccion:" + direccion;
		        markers.push(marker);
		        info.push(contenido);
				i++;
		    });
		    var markerclusterer = new MarkerClusterer(map, markers);	    
		    for (var x = 0, j = info.length; x < j; x++) {
		        var contenido = info[x];
		        var marker = markers[x];
		        (function(marker, contenido){                       
		            google.maps.event.addListener(marker, 'click', function() {
		                infowindow.setContent(contenido);
		                infowindow.open(map, marker);
		            });
		        })(marker,contenido);
		    }
		});

	}
</script>
<title>Ubicacion Cliente NIC: <%= (String)request.getParameter("nic") %></title>
</head>
<body onload="initialize('<%= Latitud %>','<%= Longitud %>')">
	Coordenadas Cliente:  <%= Latitud %> / <%= Longitud %><br/>
	Nic: <%= (String)request.getParameter("nic") %> <br/>
	
	<input type="button" id="cmd_ver" name="cmd_ver" value ="Ver Recurso" onclick="javascript:ShowPerson()" />
  <br/>
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

<%
	conexion.Close();

%>